<template>
  <view class="container">
    <view class="new-top-bar">
      <view class="back-area" @tap="goBack">
        <text class="back-icon">
          <image src="/static/images/cart/back.png" />
        </text>
      </view>
      <view class="title-area">
        <text class="title">购物车</text>
      </view>
      <view class="right-area" @tap="onGetOrder">
        <view class="order-btn">
          <text class="order-text">取单</text>
          <view class="badge">
            <text class="badge-text">{{ orderCount }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="old-top-bar">
      <view class="top-left">
        <image class="back-icon-img" src="/static/images/order/back.png" mode="widthFix" @tap="goBack" />
        <button class="buyer-btn active">临时买家</button>
        <button class="buyer-btn">张三</button>
      </view>
      <view class="top-right">
        <image class="add-icon" src="/static/images/order/add.png" mode="widthFix" @tap="onAdd" />
      </view>
    </view>

    <view class="middle-content">
      <!-- 表头 -->
      <view class="header-row">
        <text class="header-cell info-cell">货品信息</text>
        <text class="header-cell quantity-cell">数量</text>
        <text class="header-cell price-cell">单价</text>
        <text class="header-cell money-cell">货款</text>
        <text class="header-cell clear-cell">清空</text>
      </view>

      <!-- 数据行 -->
      <view v-for="(item,index) in goodsList" :key="index" class="goods-row">
        <!-- 上行内容：序号、货品信息、数量、单价、货款、删除按钮 -->
        <view class="goods-top-line">
          <view class="goods-left-info">
            <text class="goods-index">{{ index + 1 }}.</text>
            <view class="goods-info">
              <text class="goods-name">{{ item.name }}</text>
              <text class="goods-remark-red">{{ item.host }}</text>
              <text class="goods-spec-green">{{ item.spec }}</text>
            </view>
          </view>
          <view class="goods-right-info">
            <text class="goods-quantity">{{ item.quantity }}个</text>
            <text class="goods-price">{{ item.price }}/个</text>
            <text class="goods-money">{{ item.money }}元</text>
            <view class="goods-delete" @tap="removeItem(index)">
              <image src="/static/images/delete.png" mode="widthFix" class="delete-icon" />
            </view>
          </view>
        </view>
        <view class="goods-bottom-line">
          <text class="fujiafei">{{ formatFujiafei(item.fujiafei_list) }}</text>
          <text class="subtotal">小计：{{ item.subtotal }}</text>
        </view>
      </view>
    </view>

    <view class="bottom-bar">
      <button class="hang-btn" @tap="hangOrder">挂单</button>
      <button class="batch-btn" @tap="batchOrder">批量下单</button>
      <view class="checkout-container" @tap="checkout">
        <text class="checkout-label">结算收银</text>
        <text class="checkout-total">合计：{{ totalAmount }}元</text>
      </view>
    </view>
  </view>
</template>


<script setup lang="ts">
import { ref } from 'vue'

const orderCount = ref<number>(5)
const totalAmount = ref<string>('9999990.00')
const goodsList = ref([
  {
    name: '芜湖青椒',
    host: '王老板/0008',
    spec: '1件=10公斤',
    fujiafei_list: {
      'lizi': 10,
      'kaipiao': 2
    },
    quantity: '0',
    price: '23.69',
    money: '99999',
    subtotal: '99999'
  }
])

const goBack = () => {
  uni.navigateBack()
}
const onGetOrder = () => {}
const onAdd = () => {}
const removeItem = (index: number) => {
  goodsList.value.splice(index, 1)
}
const hangOrder = () => {}
const batchOrder = () => {}
const checkout = () => {}

const formatFujiafei = (fujiafei: Record<string, number>) => {
  const result: string[] = []
  if (fujiafei.lizi !== undefined) {
    result.push(`力资${fujiafei.lizi}`)
  }
  if (fujiafei.kaipiao !== undefined) {
    result.push(`开票${fujiafei.kaipiao}`)
  }
  return result.join(' ')
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  padding-top: 160rpx;
}

.new-top-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.back-area {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon image {
  width: 30rpx;
  height: 30rpx;
  color: #000;
}

.title-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000;
}

.right-area {
  width: 160rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-btn {
  background: #43CF7C;
  border-radius: 10rpx;
  position: relative;
  padding: 0 20rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-text {
  font-size: 30rpx;
  color: #fff;
}

.badge {
  width: 40rpx;
  height: 40rpx;
  margin-left: 10rpx;
  font-weight: bold;
  background: #EB0E0E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-text {
  font-size: 24rpx;
  color: #fff;
}

.old-top-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 0 20rpx;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
  z-index: 9;
  justify-content: space-between;
  position: fixed;
  top: 80rpx;
  left: 0;
  right: 0;
}

.top-left {
  display: flex;
  align-items: center;
}

.back-icon-img {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.buyer-btn {
  background: #fff;
  color: #333;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  height: 60rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  margin-right: 10rpx;
  font-weight: bold;
  border: 1rpx solid #000;
}

.buyer-btn.active {
  background: #43CF7C;
  color: #fff;
  border: none;
}

.top-right {
  display: flex;
  align-items: center;
}

.add-icon {
  width: 50rpx;
  height: 50rpx;
  font-weight: bold;
}

.middle-content {
  background-color: #ffffff;
  padding-top: 10rpx;
}

.header-row {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.header-cell {
  text-align: left;
}

.info-cell {
  flex: 2;
  text-align: left;
}

.quantity-cell {
  flex: 1;
  text-align: center;
}

.price-cell {
  flex: 1;
  text-align: center;
}

.money-cell {
  flex: 2;
  text-align: center;
}

.clear-cell {
  flex: 1;
  text-align: center;
  color: #EB0E0E;
}

.goods-row {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
}

.goods-top-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-left-info {
  display: flex;
  align-items: center;
}

.goods-index {
  font-size: 32rpx;
  color: #000;
  margin-right: 10rpx;
}

.goods-info {
  display: flex;
  flex-direction: column;
}

.goods-name {
  font-weight: bold;
  letter-spacing: 2rpx;
  color: #000;
  margin-bottom: 4rpx;
}

.goods-remark-red {
  background: #EB0E0E;
  color: #fff;
  border-radius: 4rpx;
  padding: 4rpx 8rpx;
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.goods-spec-green {
  border: 1px solid #43CF7C;
  color: #43CF7C;
  border-radius: 4rpx;
  padding: 4rpx 8rpx;
  font-size: 22rpx;
}

.goods-right-info {
  display: flex;
  align-items: center;
}

.goods-quantity {
  color: #EB0E0E;
  font-size: 32rpx;
  margin-right: 32rpx;
}

.goods-price {
  color: #333;
  font-size: 32rpx;
  margin-right: 36rpx;
}

.goods-money {
  color: #333;
  margin-right: 32rpx;
  font-size:36rpx;
}

.goods-delete {
  margin-left: 10rpx;
}

.delete-icon {
  width: 30rpx;
  height: 30rpx;
}

.goods-bottom-line {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fujiafei {
  font-size: 26rpx;
  color: #333;
  margin-right: 100rpx;
}

.subtotal {
  font-size: 36rpx;
  color: #333;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #eee;
  padding: 20rpx;
}

.hang-btn, .batch-btn {
  flex:1;
  background: #F5FAF7;
  color: #333;
  border:none;
  border-radius: 10rpx;
  padding: 6rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 20rpx;
  text-align: center;
}

.checkout-container {
  background: #11ED69;
  border-radius: 10rpx;
  padding: 6rpx;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.checkout-label {
  font-size: 36rpx;
  color: #000;
  font-weight: bold;
}

.checkout-total {
  font-size: 36rpx;
  color: #fff;
  margin-top: 10rpx;
}
</style>
